<!DOCTYPE html>
<html class="x-admin-sm">

	<head>
		<meta charset="UTF-8">
		<title>欢迎页面-X-admin2.2</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
		<link rel="stylesheet" href="./css/font.css">
		<link rel="stylesheet" href="./css/xadmin.css">
		<script src="./lib/layui/layui.js" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
		<script type="text/javascript" src="./js/xadmin.js"></script>
	</head>

	<body>
		<div class="layui-fluid">
			<div class="layui-row layui-col-space15">
				<div class="layui-card-body ">
					<form class="layui-form layui-col-space5">

						<div class="layui-form-item">
							<label for="username" class="layui-form-label">
                           请选择：
                        </label>
							<div class="layui-input-inline">
								<select id="type">
									<option value="login">学员登录数统计</option>
									<option value="registered">学员注册数统计</option>
									<option value="videoViewingNum">视频观看数统计</option>
									<option value="dailyUserNumber">每日学员数统计</option>
									<option value="dailyCourseNumber">每日课程数统计</option>
								</select>
							</div>
						</div>
						时间：
						<div class="layui-inline layui-show-xs-block">
							<input class="layui-input" type="text" autocomplete="off" placeholder="开始日" name="startDate" id="startDate">
						</div>
						<div class="layui-inline layui-show-xs-block">
							<input class="layui-input" type="text" autocomplete="off" placeholder="截止日" name="endDate" id="endDate">
						</div>
						<div class="layui-inline layui-show-xs-block">
							<button class="layui-btn" type="button" onclick="statisticalChart()" lay-filter="sreach"><i class="layui-icon">&#xe615;查询</i></button>
						</div>
						<div class="layui-inline layui-show-xs-block">
							<button class="layui-btn" type="button" onclick="btn1(this)" value="7" lay-filter="sreach"><i class="layui-icon">7天</i></button>
						</div>
						<div class="layui-inline layui-show-xs-block">
							<button class="layui-btn" type="button" onclick="btn1(this)" value="15" lay-filter="sreach"><i class="layui-icon">15天</i></button>
						</div>
						<div class="layui-inline layui-show-xs-block">
							<button class="layui-btn" type="button" onclick="btn1(this)" value="30" lay-filter="sreach"><i class="layui-icon">30天</i></button>
						</div>
					</form>
				</div>

				<div class="layui-col-sm12 layui-col-md6">
					<div class="layui-card">
						<div class="layui-card-header">时间段数据统计</div>
						<div class="layui-card-body" style="min-height: 280px;">
							<div id="main1" class="layui-col-sm12" style="height: 300px;"></div>

						</div>
					</div>
				</div>
			</div>
		</div>
		</div>
		</div>

		<script src="js/jquery.min.js"></script>
		<script src="js/jquery.cookie.js"></script>
		<script>
			function btn1(obj) {
				var type = $("#type option:selected").val();
				var num = obj.value;
				if(num == 7) {
					$.ajax({
						type: "get",
						url: "http://localhost:9095/admin/eduStatistics/getDaya",
						async: false,
						headers: {
							"token2": $.cookie("token2")
						},
						data: {
							"type": type
						},
						success(msg) {
							data = msg.data.data;
							showDate = msg.data.showDate;
							console.log(data);
							type = msg.data.type;
							charts(type);
						}
					});
				} else if(num == 15) {
					$.ajax({
						type: "get",
						url: "http://localhost:9095/admin/eduStatistics/getDayb",
						async: false,
						headers: {
							"token2": $.cookie("token2")
						},
						data: {
							"type": type
						},
						success(msg) {
							data = msg.data.data;
							showDate = msg.data.showDate;
							type = msg.data.type;
							charts(type);
						}
					});
				} else {
					$.ajax({
						type: "get",
						url: "http://localhost:9095/admin/eduStatistics/getDayc",
						async: false,
						headers: {
							"token2": $.cookie("token2")
						},
						data: {
							"type": type
						},
						success(msg) {
							data = msg.data.data;
							showDate = msg.data.showDate;
							type = msg.data.type;
							charts(type);
						}
					});
				}
			}
			var data = [];
			var showDate = [];
			var type = "";
			function statisticalChart() {
				var startTime = $("#startDate").val();
				var endTime = $("#endDate").val();
				var type = $("#type option:selected").val();
				$.ajax({
					type: "get",
					url: "http://localhost:9095/admin/eduStatistics/selectEduStatistics",
					async: true,
					headers: {
						"token2": $.cookie("token2")
					},
					data: {
						"startTime": startTime,
						"endTime": endTime,
						"type": type
					},
					success(msg) {
						data = msg.data.data;
						showDate = msg.data.showDate;
						type = msg.data.type;

						charts(type);
					}
				});
			}
			layui.use(['form', 'layer', 'laydate'],
				function() {
					$ = layui.jquery;
					var form = layui.form,
						layer = layui.layer,
						laydate = layui.laydate;

					laydate.render({
						elem: "#startDate",
						type: 'date'
					})
					laydate.render({
						elem: "#endDate",
						type: 'date'
					})

				});

			// 基于准备好的dom，初始化echarts实例

			function charts(type) {
				var myChart = echarts.init(document.getElementById('main1'));
				var charName = "活跃人数";
				if(type == "registered") {
					charName = "注册人数";
				} else if(type == "dailyUserNumber") {
					charName = "每日学员数";
				} else if(type == "dailyCourseNumber") {
					charName = "每日课程数";
				} else if(type == "videoViewingNum") {
					charName = "视频观看数";
				}

				// 指定图表的配置项和数据
				var option = {
					grid: {
						top: '5%',
						right: '1%',
						left: '1%',
						bottom: '10%',
						containLabel: true
					},
					tooltip: {
						trigger: 'axis'
					},
					xAxis: {
						type: 'category',
						data: this.showDate,
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						name: charName,
						data: this.data,
						type: 'line',
						smooth: true
					}]
				};

				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			}
		</script>
		<script>
			var _hmt = _hmt || [];
			(function() {
				var hm = document.createElement("script");
				hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
				var s = document.getElementsByTagName("script")[0];
				s.parentNode.insertBefore(hm, s);
			})();
		</script>
	</body>

</html>